<div class="card" id="responses">
  <div class="item_show__header">
    <h1 class="item_show__header-title">
      <%= t ".title", number: current_idx %>

      <%= link_to t("actions.next", scope: "decidim.forms.admin.questionnaires.responses").html_safe, next_url, rel: "next", class: "button button__sm button__secondary next" unless last? %>
      <%= link_to t("actions.previous", scope: "decidim.forms.admin.questionnaires.responses").html_safe, prev_url, rel: "prev", class: "button button__sm button__secondary prev" unless first? %>
      <%= link_to t("actions.export", scope: "decidim.forms.admin.questionnaires.responses"), questionnaire_export_response_url(@participant.session_token), class: "button button__sm button__secondary export" %>
      <%= link_to t("actions.back", scope: "decidim.forms.admin.questionnaires.responses"), questionnaire_participants_url, class: "button button__sm button__secondary back" %>
    </h1>
  </div>
  <div class="card-section">
     <div class="table">
      <table class="table-list">
        <thead>
          <tr>
            <th><%= t("session_token", scope: "decidim.forms.user_responses_serializer") %></th>
            <th><%= t("user_status", scope: "decidim.forms.user_responses_serializer") %></th>
            <th><%= t("ip_hash", scope: "decidim.forms.user_responses_serializer") %></th>
            <th><%= t("completion", scope: "decidim.forms.user_responses_serializer") %></th>
            <th><%= t("created_at", scope: "decidim.forms.user_responses_serializer") %></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><%= @participant.session_token %></td>
            <td><%= @participant.status %></td>
            <td><%= @participant.ip_hash %></td>
            <td><%= display_percentage(@participant.completion) %></td>
            <td><%= l @participant.responded_at, format: :short %></td>
          </tr>
        </tbody>
      </table>
    </div>
    <dl class="p-4 [&_ul]:list-disc [&_ul]:pl-4">
      <% @participant.responses.each do |response| %>
        <dt class="font-semibold"><%= response.question %></dt>
        <dd><%= response.body %></dd>
      <% end %>
    </dl>
  </div>
</div>
